<template>
	<view class="home">
		<u-navbar bgColor="#ffffff" placeholder @rightClick="rightClick" title="雨量站列表" :titleStyle="titleStyle"
			:autoBack="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
			</view>
			<view class="u-nav-slot" slot="right">
				<u-icon name="grid" color="#000000" size="20"></u-icon>
			</view>
		</u-navbar>

		<!-- <button @click="electricFn(12)">电量</button> -->
		<mescroll-body @init="mescrollInit" @up="upCallback" :down="downOption" @down="downCallback" :up="upOption">
			<view class="devlist" v-for="(i,index) in dataList" :key="index" @click="devShow(i)">
				<!-- <image class="img" :src="i.productImage" mode=""></image> -->
				<image class="img0" src="@/static/imgaa.png" mode=""
					v-if="relativeTime(i.RAINFALL) <= 0  && electricFn(i.RAINFALL.DL) > 30"></image>
				<!-- 信号中断 -->
				<image class="img5" src="@/static/yichann.png" mode=""
					v-if="relativeTime(i.RAINFALL) <= 0  && electricFn(i.RAINFALL.DL) > 30 && i.RAINFALL.HR != 0 && relativeMinutes(i.RAINFALL.TIM)>=15">
				</image>
				<!-- 故障天数 -->
				<view class="img" v-if="relativeTime(i.RAINFALL) > 0 && electricFn(i.RAINFALL.DL) > 30">
					<view class="nuba" v-if="relativeTime(i.RAINFALL)<30">
						{{relativeTime(i.RAINFALL)}}天
					</view>
					<view class="nuba" v-if="relativeTime(i.RAINFALL)>=30">
						故障
					</view>
				</view>
				<!-- 电量 -->
				<view class="img1" v-if="relativeTime(i.RAINFALL) <=0  && electricFn(i.RAINFALL.DL) <= 30">
					<view class="nubb">
						{{electricFn(i.RAINFALL.DL)}}%
					</view>
					<view class="" style="font-size: 30rpx;">
						电量
					</view>
				</view>
				<!-- 故障 -->
				<view class="img2" v-if="relativeTime(i.RAINFALL) > 0  && electricFn(i.RAINFALL.DL) < 30">
					<view class="nuba" v-if="relativeTime(i.RAINFALL)<30">
						{{relativeTime(i.RAINFALL)}}天
					</view>
					<view class="nuba" v-if="relativeTime(i.RAINFALL)>=30">
						故障
					</view>
					<view class="nubb">
						{{electricFn(i.RAINFALL.DL)}}%
					</view>
				</view>

				<view class="devitem">
					<view class="nick">
						{{i.nickName}}
					</view>

					<view class="text">
						编号：{{i.deviceName}}
					</view>
					<!-- 					<view class="text">
						IMEI：{{i.imei}}
					</view> -->

				</view>
				<view class="las_box">
					<!-- <view class="">
						<view class="textaaa">
							小雨
						</view>
						<view class="textabb">
							中雨
						</view>
						<view class="textacc">
							大雨
						</view>
						<view class="textadd">
							暴雨
						</view>
						<view class="textaee"> 
							大暴雨
						</view>
						<view class="textaff">
							特大暴雨
						</view>
					</view> -->
					<view class="">
						<image class="imgaaa" src="@/static/yua.png" mode=""
							v-if="i.RAINFALL.MR >0 && i.RAINFALL.MR <0.5">
						</image>
						<image class="imgaaa" src="@/static/yub.png" mode=""
							v-if="i.RAINFALL.MR >=0.5 && i.RAINFALL.MR <1">
						</image>
						<image class="imgaaa" src="@/static/yuc.png" mode=""
							v-if="i.RAINFALL.MR >=1 && i.RAINFALL.MR <1.5">
						</image>
						<image class="imgaaa" src="@/static/yud.png" mode=""
							v-if="i.RAINFALL.MR >=1.5 && i.RAINFALL.MR <2">
						</image>
						<image class="imgaaa" src="@/static/yue.png" mode=""
							v-if="i.RAINFALL.MR >=2 && i.RAINFALL.MR <2.5">
						</image>
						<image class="imgaaa" src="@/static/yuf.png" mode=""
							v-if="i.RAINFALL.MR >=2.5 && i.RAINFALL.MR <3">
						</image>
						<image class="imgaaa" src="@/static/yug.png" mode=""
							v-if="i.RAINFALL.MR >=3 && i.RAINFALL.MR <3.5">
						</image>
						<image class="imgaaa" src="@/static/yuh.png" mode="" v-if="i.RAINFALL.MR >=3.5"></image>
					</view>
					<view class="yuq_boxaa" v-if="i.RAINFALL.TR>0 || i.RAINFALL.YR>0">
						<image class="imgaaa" src="@/static/yu.png" mode="" v-if="i.RAINFALL.HR>0 && i.RAINFALL.MR<=0">
						</image>
						<view class="">
							<view class="box">
								{{i.RAINFALL.TR}}
							</view>
							<view class="" style="height: 5rpx;">

							</view>
							<view class="box">
								{{i.RAINFALL.YR}}
							</view>
						</view>
					</view>
					<view class="yuq_boxaa" v-if="i.RAINFALL.TR<=0 && i.RAINFALL.YR<=0">
						<u-icon name="arrow-right" color="#c5c5c7" size="26"></u-icon>
					</view>
				</view>
				<!-- 柱状图 -->
				<view class="zhuz">
					<rainchart :rainData="hourRainfall(i.RAINFALL)" />
					<!-- <rainchart :rainData="35" /> -->
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	import rainchart from '@/components/rain-chart.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			rainchart
		},
		data() {
			return {
				titleStyle: {
					color: '#000000',
					fontSize: '40rpx'
				},
				upOption: {
					page: {
						num: 0,
						size: 15 // 每页数据的数量,默认10
					},
					noMoreSize: 2,
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption: {},
				dataList: [],
				relativenNum: '', //相对时间
				rfsgId: ''
			}
		},
		onLoad(option) {
			this.rfsgId = option.id
		},
		methods: {
			rightClick() {
				uni.redirectTo({
					url: '/pages/index/managementOffice?name=' + '自计'
				});
				console.log('-------------------------------------');
			},
			devShow(i) {
				console.log('iiii', i);
				uni.navigateTo({
					url: '/pages/index/rainfallToday?productKey=' + i.productKey + '&deviceName=' + i.deviceName +
						'&name=' + i.nickName + '&lon=' + i.mapLon + '&lat=' + i.mapLat
				});
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				console.log('this.rfsgId', this.rfsgId);
				uni.$u.http.get('/api/device/device/getZiJiRainfallStationList', {
					params: {
						"pageSize": pageSize,
						"pageNum": pageNum,
						"rfsgId": this.rfsgId
					}
				}).then(res => {
					console.log('res',res);
					if (res.code == 200) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						// let totalPage = data.total;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = res.total;
						// 接口返回的是否有下一页 (true/false)

						//设置列表数据

						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据
						for (let i = 0; i < this.dataList.length; i++) {
							this.dataList[i].json = JSON.parse(this.dataList[i].thingsModelValue)
							let RAINFALL = {
								TR: '0',
								H24R: '0',
								HR: '0',
								MR: '0',
								YR: '0',
								DL: '11.5',
								TIM: '0'
							}
							if (this.dataList[i].json == null) {
								this.dataList[i].RAINFALL = RAINFALL;
							} else {
								for (let j = 0; j < this.dataList[i].json.length; j++) {

									let arr = this.dataList[i];

									// 今日
									if (arr.json[j].identifier == 'TR' || arr.json[j].identifier == '20') {
										RAINFALL.TR = arr.json[j].value
									}
									// 24小时
									if (arr.json[j].identifier == 'H24R' || arr.json[j].identifier == '20') {
										RAINFALL.H24R = arr.json[j].value
									}
									// 小时
									if (arr.json[j].identifier == 'HR' || arr.json[j].identifier == '1A') {
										RAINFALL.HR = arr.json[j].value
									}
									// 分钟
									if (arr.json[j].identifier == 'MR' || arr.json[j].identifier == '21') {
										RAINFALL.MR = arr.json[j].value
									}
									// 昨日
									if (arr.json[j].identifier == 'YR' || arr.json[j].identifier == 'ZR') {
										RAINFALL.YR = arr.json[j].value
									}
									// 电量
									if (arr.json[j].identifier == '38') {
										// RAINFALL.DL = arr.json[j].value
									}
									// 日期
									if (arr.json[j].identifier == 'TIM' || arr.json[j].identifier == 'F0') {
										// let time = arr.json[j].value
										RAINFALL.TIM = arr.json[j].value
										// console.log('time',this.relativeTime(time));
										// console.log('时间',this.relativeTime(arr.json[j].value));
									}
									// this.dataList[i].RAINFALL = RAINF ALL
								}
								this.dataList[i].RAINFALL = RAINFALL;
								// console.log('列表----', this.dataList);
							}
						}
						// console.log('列表', this.dataList);
						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						this.mescroll.endBySize(curPageLen, totalSize);
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			// 24小时雨量
			hourRainfall(data) {
				let num = data.TR*1 + data.YR*1
				// console.log('-------',data)
				return num
				// return 50
			},
			// 相对时间
			relativeTime(date) {
				const dateToCheck = dayjs(date.TIM);
				// 获取今天的日期
				const today = dayjs().format('YYYY-MM-DD HH:mm');
				// 计算dateToCheck距离今天的天数差异
				const daysDifference = dateToCheck.diff(today, 'day');
				// 如果你想要一个绝对值（不考虑正负），可以使用Math.abs
				const absoluteDaysDifference = Math.abs(daysDifference);
				return absoluteDaysDifference
			},
			// 相对分钟
			relativeMinutes(date) {
				const dateToCheck = date
				// console.log('*-------',dayjs(date.TIM))
				const now = dayjs();
				// 直接返回相差的分钟数
				console.log('-------', Math.abs(now.diff(dateToCheck, 'minute')))
				return Math.abs(now.diff(dateToCheck, 'minute'))
			},
			// 电量
			electricFn(data) {
				let nub = (data - 8) / (12 - 8) * 100
				return nub.toFixed(0)
			},
			// 下拉刷新
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>
<style scoped lang="scss">
	// 图片
	.imgaaa {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10rpx;
	}

	.home {
		.devlist {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			padding: 10rpx 15rpx;
			margin: 15rpx 20rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			// background-color: rgba(193, 193, 193, 0.1);
			// border: 5rpx solid #ffffff;
			box-shadow: 0 0 15rpx 5rpx rgba(134, 134, 134, 0.2);

			.img0 {
				width: 100rpx;
				height: 100rpx;
				font-size: 40rpx;
				line-height: 45rpx;
				border-radius: 10rpx;
			}

			.img5 {
				position: absolute;
				opacity: 0.9;
				left: 20rpx;
				width: 60rpx;
				height: 60rpx;
				font-size: 40rpx;
				line-height: 45rpx;
				border-radius: 10rpx;
			}

			.img {
				width: 100rpx;
				height: 100rpx;
				font-size: 40rpx;
				line-height: 45rpx;
				border-radius: 10rpx;
				// margin: 10rpx;
				color: #ffffff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #dc3545;

			}

			.img1 {
				width: 100rpx;
				height: 100rpx;
				font-size: 40rpx;
				line-height: 45rpx;
				border-radius: 10rpx;
				// margin: 10rpx;
				color: #ffffff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #f9ae3d;

			}

			.img2 {
				width: 100rpx;
				height: 100rpx;
				font-size: 40rpx;
				line-height: 45rpx;
				border-radius: 10rpx;
				// margin: 10rpx;
				color: #ffffff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

			}

			.las_box {
				width: 180rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-weight: bold;

				.textaaa {
					font-size: 40rpx;
					color: #4CAF50;
				}

				.textabb {
					font-size: 40rpx;
					color: #dcb800;
				}

				.textacc {
					font-size: 40rpx;
					color: #FFA500;
				}

				.textadd {
					font-size: 40rpx;
					color: #FF4500;
				}

				.textaee {
					font-size: 40rpx;
					color: #DC143C;
				}

				.textaff {
					font-size: 40rpx;
					color: #8B008B;
				}
			}

			// 柱状图
			.zhuz {
				margin: 0 0rpx 0rpx 10rpx;
				// background-color: #000000;
			}

			.devitem {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 380rpx;
				margin-left: 30rpx;

				.nick {
					color: #000000;
					font-size: 40rpx;
				}

				.text {
					font-size: 30rpx;
					color: #6b6b6b;
				}

			}

			.yuq_boxaa {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.box {
					width: 90rpx;
					padding: 5rpx 0;
					font-size: 35rpx;
					line-height: 40rpx;
					text-align: center;
					color: #ffffff;
					border-radius: 10rpx;
					border: 1rpx solid #000000;
					background-color: #3f72b4;
				}
			}
		}
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		background-color: #f2f2f7;
	}
</style>